<template>
  <svg
    inert
    class="svg-icon"
    :width="width"
    :height="height"
    :color="color"
    @mouseenter="mouseenterClick"
    @mouseleave="mouseleaveClick"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '#0d82ea',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
});
const emit = defineEmits(['mouseenter', 'mouseleave']);
const symbolId = computed(() => {
  return `#${props.prefix}-${props.name}`;
});
const mouseenterClick = () => {
  emit('mouseenter');
};
const mouseleaveClick = () => {
  emit('mouseleave');
};
</script>
